<template>
  <div class="data-table-container">
    <!-- 搜索区域 -->
    <div class="search-area" v-if="showSearch">
      <slot name="search"></slot>
      <div class="search-buttons">
        <slot name="search-buttons">
          <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
          <el-button icon="Refresh" @click="handleReset">重置</el-button>
        </slot>
      </div>
    </div>

    <!-- 操作区域 -->
    <div class="action-area" v-if="$slots.actions">
      <slot name="actions"></slot>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      stripe
      :border="border"
      style="width: 100%"
      :height="height"
      :row-key="rowKey"
      :empty-text="'暂无数据'"
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
      <el-table-column
        v-if="selection"
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        v-if="showIndex"
        label="序号"
        type="index"
        width="60"
        align="center"
      />
      <slot></slot>
      <el-table-column
        v-if="$slots.operation"
        label="操作"
        :width="operationWidth"
        fixed="right"
        align="center"
      >
        <template #default="scope">
          <slot name="operation" :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container" v-if="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :layout="paginationLayout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

const props = defineProps({
  // 表格数据
  data: {
    type: Array,
    required: true
  },
  // 表格行唯一标识
  rowKey: {
    type: String,
    default: 'id'
  },
  // 是否展示搜索区域
  showSearch: {
    type: Boolean,
    default: true
  },
  // 是否展示序号列
  showIndex: {
    type: Boolean,
    default: true
  },
  // 是否启用多选
  selection: {
    type: Boolean,
    default: false
  },
  // 是否显示边框
  border: {
    type: Boolean,
    default: true
  },
  // 表格高度
  height: {
    type: [String, Number],
    default: ''
  },
  // 是否展示分页
  pagination: {
    type: Boolean,
    default: true
  },
  // 每页条数选项
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  },
  // 分页布局
  paginationLayout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  // 操作列宽度
  operationWidth: {
    type: String,
    default: '200'
  },
  // 数据总条数
  total: {
    type: Number,
    default: 0
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits([
  'update:selection',
  'search',
  'reset',
  'page-change',
  'size-change',
  'sort-change'
])

// 表格数据
const tableData = computed(() => props.data)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(props.pageSizes[0])
const selectedRows = ref([])

// 方法
const handleSearch = () => {
  emit('search')
}

const handleReset = () => {
  emit('reset')
}

const handleSelectionChange = (selection) => {
  selectedRows.value = selection
  emit('update:selection', selection)
}

const handleSizeChange = (val) => {
  pageSize.value = val
  emit('size-change', val)
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  emit('page-change', val)
}

const handleSortChange = (column) => {
  emit('sort-change', {
    column: column.column,
    prop: column.prop,
    order: column.order
  })
}

// 重置分页
watch(() => props.total, () => {
  if (currentPage.value > 1 && currentPage.value > Math.ceil(props.total / pageSize.value)) {
    currentPage.value = 1
  }
})
</script>

<style scoped>
.data-table-container {
  width: 100%;
}

.search-area {
  background-color: #fff;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.search-buttons {
  margin-left: auto;
  white-space: nowrap;
}

.action-area {
  margin-bottom: 10px;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style> 